<template>
	<view>
		<up-code
			:seconds="seconds" 
			ref="uCodeRef"
			@change="codeChange"
		></up-code>
		<up-popup :show="show" @close="close" mode="bottom" :safeAreaInsetBottom="false" bgColor="transparent">
			<view class="good-box fc-ac px-50" :style="{'min-height':height+'rpx'}">
				<view class="w-100 good-border"></view>
				<image style="width: 100%;height: 32rpx;min-height: 32rpx;" src="/static/icon/public/base-popup.png" mode=""></image>
				<!-- 标题 -->
				<view class="color pt-60 fs-32 t-c">
					快捷支付
				</view>
				
				<view class="w-100 mt-80">
					<view class="public-card-14 fr-ac px-40 py-40 mb-40" style="min-height: 180rpx;" v-for="(item,index) in 3" :key="index">
						<view class="flex-1 mr-20">
							<view class="fr-ac">
								<view class="fs-32 mr-10">
									招商银行
								</view>
								<image style="width: 24rpx;height: 24rpx;" src="/static/icon/public/right.png" mode=""></image>
							</view>
							<view class="op-50 mt-20">
								213123213213213123
							</view>
						</view>
						<view class="ml-auto">
							<up-icon v-if="false" name="yuanxingxuanzhongfill" customPrefix="custom-icon" size="18"
								:color="publicStyles['--color']"></up-icon>
							<up-icon v-else name="yuanxingweixuanzhong" customPrefix="custom-icon" size="18"
								:color="publicStyles['--gray-9']"></up-icon>
						</view>
					</view>
				</view>
				
				
				<view class="w-100">
					<view class="fr-ac px-20 pb-30 u-border-bottom mt-30" style="border-color: var(--gray-line) !important;">
						<view class="w-20 op-90">
							验证码
						</view>
						<view class="flex-1 mx-20">
							<input v-model="formData.code" class="w-100 color" type="number" maxlength="6" placeholder="请输入验证码" />
						</view>
						<view @tap="getCode" class="public-btn-6 fr-ac-jc color px-10" style="min-width: 174rpx;height: 60rpx;">
							{{tips}}
						</view>
					</view>
				</view>
				<view class="w-100 fr-ac-jc gap-20 py-40 my-40">
					<image style="width: 24rpx;height: 24rpx;" src="/static/icon/public/add-gray.png" mode=""></image>
					<view class="op-70">
						添加新卡
					</view>
				</view>
				
				<view class="fr-ac gap-40 w-100 mt-auto mb-50">
					<view @click="close" class="public-btn-7 transition py-25 t-c flex-1">
						<view class="op-90 fs-32">
							取消
						</view>
					</view>
					<view @click="paySubmit" class="public-btn-4 transition py-25 t-c flex-2">
						<view class="text-color-b fs-32">
							支付
						</view>
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script>
	import {
		send_sms
	} from '@/utils/request/api';
	import {
		useColorStore
	} from '@/store/color'
	export default {
		props: {
			//是否显示
			show: {
				default: false,
				type:Boolean
			},
			height:{
				default: 1000
			},
			
		},
		data() {
			return {
				// 验证码
				tips: '',
				seconds: 60,
				formData: {
					code: ''
				},
				
				card_list: [],
			}
		},
		computed: {
			publicStyles(){
				return useColorStore().publicStyles
			}
		},
		methods: {
			close(){
				this.$emit('close')
			},
			
			
			// 验证码
			codeChange(text){
				this.tips = text;
				console.log(text)
			},
			async getCode(){
				if (this.$refs['uCodeRef'].canGetCode) {
					if (uni.$u.test.mobile(formData.mobile)) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码',
						});
						const res = await send_sms({
							mobile: formData.mobile,
						})
						uni.hideLoading();
						// 这里此提示会被start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs['uCodeRef'].start();
					} else {
						uni.$u.toast('请先输入正确手机号');
					}
			
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			
			
			// 支付
			async paySubmit(){
				
			}
		}
	}
</script>

<style lang="scss">
	.good-box{
		position: relative;
		box-sizing: border-box;
		background-color: #fff ;
		z-index: 999;
		background: linear-gradient(to bottom, #17404D 0%, #001524 100%);
	}
	
	@media screen and (min-width:960px){
		.good-box{
			left: 50%;
			width: calc(750rpx);
			transform: translateX(-50%);
		}
	}
	@media screen and (max-width:960px){
		.good-box{
			left: 0;
			width: calc(100vw);
		}
	}
	
	.good-border{
		position: absolute;
		top: 0;
		left: 0;
		height: 2px;
		background: linear-gradient(to right, #184250 0%, #4EB5C8 25% , #E4FBFF 50% , #4EB5C8 75% , #184250 100%);
	}
</style>